import React, { Component } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import NarBar from './navbar';
import NotFound from './notFound';
import Web from './web';
import Cpp from './cpp';
import Home from './home';
import Linux from './linux';
import Mysql from './mysql';
import WebContent from './webContent';
import Content from './content';

class App extends Component {
    state = {  } 
    render() { 
        return (<React.Fragment>
            <NarBar />
            <div className='container'>
                {/* Routes中匹配规则与if-else语句的匹配机制差不多，都是匹配最先符合条件的 */}
                <Routes>
                    <Route path='/' element={<Home />}/>
                    <Route path='/cpp' element={<Cpp />}/>
                    <Route path='/cpp/content' element={<Content />} />
                    <Route path='/linux' element={<Linux />}>
                        {/* 子路由的实际url需要拼接上父路由的url，子路由的path在写时不用加上父路由的url */}
                        <Route path='homework' element={<h1>Homework</h1>}/>
                        <Route path='solutions' element={<h1>Solution</h1>}/>
                        <Route path='ranks' element={<h1>Rank</h1>}/>
                        <Route path='*' element={<h1>Others</h1>} />
                    </Route>
                    <Route path='/mysql' element={<Mysql />}/>
                    <Route path='/mysql/content' element={<Content />} />
                    <Route path='/web' element={<Web />} />
                    {/* <Route path='/web/:doc/:id' element={<WebContent />} /> */}
                    <Route path='/web/content' element={<WebContent />} />
                    <Route path='/404' element={<NotFound />} />
                    <Route path='*' element={<Navigate replace to="/404" />}/>
                </Routes>
            </div>
        </React.Fragment>);
    }
}
 
export default App;